<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>AJAX无刷新添加数据</title>
    <style>
    	#box{
    		width: 800px;
    		border: 1px solid #000;
    		padding: 20px;
    		background-color:#feeeed;
            float:left;
    	}
    	#addbox{
    		width: 300px;
    		padding: 20px;
    		border-color: #abcdef;
    		position: fixed;
    		right: 0px;
    	}
    </style>
</head>
<body>
    <h1>AJAX无刷新添加数据</h1>
    <hr>
    <div id="box"></div>
    <div id="addbox">
    	<form name="addform" onsubmit="return addData()">
    		姓名: <input type="text" name="name">
    		性别: <input type="radio" name="sex" value="0">女
    			  <input type="radio" name="sex" value="1" checked>男
    			  <input type="radio" name="sex" value="2">保密
    		年龄: <input type="text" name="age"><br>
    		<button>提交</button>
    		
    	</form>
    </div>
    <script>
    	function addData(){
    		//各种获取
    		var name = document.addform.name.value;
    		var sex = document.addform.sex.value;
    		var age = document.addform.age.value;
    		var xhr = new XMLHttpRequest();
    		xhr.onreadystatechange = function(){
	    		if(xhr.readyState == 4){
	    			if(xhr.status == 200){
	    				// xhr.responseText
	    				console.log(xhr.responseText);
	    				if(xhr.responseText >0){
	    					//loadHtml()
	    					var tr = table.insertRow(table.rows.length);
	    					tr.insertCell(0).innerHTML = xhr.responseText;
	    					tr.insertCell(1).innerHTML = name;
	    					tr.insertCell(2).innerHTML = sex;
	    					tr.insertCell(3).innerHTML = age;
	    					tr.insertCell(4).innerHTML = ''
	    					alert('安排上了...');
	    				}else{
	    					alert('没安排上....');
	    				}

	    			}
	    		}
    		}
    		xhr.open('post','./php/5.php',true);
    		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    		xhr.send('name='+name+'&sex='+sex+'&age='+age);
    		return false;
    	}
    	loadHtml();
    	function loadHtml(){
    		var xhr = new XMLHttpRequest();
    		xhr.onreadystatechange = function(){
    			if(xhr.readyState == 4){
	    			if(xhr.status == 200){
	    				// console.log(xhr.responseText);
	    				// 清空之前的数据
	    				box.innerHTML = '';
	    				var jsonStr = xhr.responseText;
	    				//eval('var obj = '+ jsonStr);
	    				//var obj = eval('('+jsonStr+')');
	    				var obj = JSON.parse(jsonStr);
	    				console.log(obj);
	    				//生成表格
	    				var table = document.createElement('table');
	    				table.width = 800;
	    				table.border = 1;
	    				table.cellSpacing=0;
	    				table.cellPadding = 5;
	    				table.id = 'table';
	    				console.log(table);
	    				box.appendChild(table);
	    				//添加表头
	    				var tr = table.insertRow(0);
	    				addTH(tr,['ID','NAME','SEX','AGE','PRO']);
	    				//向表格添加数据
	    				for (var i = 0; i < obj.length; i++) {
	    					var tr = table.insertRow(i+1);
	    					tr.insertCell(0).innerHTML = obj[i].id;
	    					tr.insertCell(1).innerHTML = obj[i].name;
	    					tr.insertCell(2).innerHTML = obj[i].sex;
	    					tr.insertCell(3).innerHTML = obj[i].age;
	    					tr.insertCell(4).innerHTML = obj[i].province;
	    				}
	    			}
	    		}
    		}
    		xhr.open('get','./php/4.php',true);
    		xhr.send();

    	}
    	function addTH(tr,data){
    		for (var i = 0; i < data.length; i++) {
    			var th = document.createElement('th');
    			th.innerHTML = data[i];
    			tr.appendChild(th);
    		}
    	}
    </script>

</body>
</html>